import React from 'react';
import {Table, Icon,Button,Popconfirm,message } from 'antd';
import {  Link} from 'react-router'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import  config from '../../assets/config';
export default class myTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tDate: [],
            loading:true,
            showEleImg:false,
            imgSrc:''
        }
    }
    getList(){
        this.setState({loading:true});
        fetch(config.base+"certificate/list",{
                method: 'GET',
                mode: config.cors,
                headers: {'Content-Type':'text/plain;charset=UTF-8'}
            })
            .then(res=>{return res.json()})
            .then(rep=>{
                const data = []
                if(rep.length==0){message.error("暂时没有数据")}else{
                for (let i = 0; i <rep.length; i++) {
                    data.push({
                        key: rep[i].id,
                        coursepName: rep[i].coursepName,
                        studentName:rep[i].studentName,
                        file:config.base+'certificates/'+rep[i].file,
                        status: rep[i].status
                        })
                }

                this.setState({
                    tDate: data,
                    loading:false
                })
                }
            })
            .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }
        onCreate(index){
          const tDate = [...this.state.tDate];
          this.setState({loading:true});
            fetch(config.base+"certificate/create",{
                    method: 'POST',
                    mode: config.cors,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body:"id="+tDate[index].key
                })
                .then(res=>{return res.json()})
                .then(rep=>{
                this.setState({loading:false});
                if(rep.status==200){
                        message.success(rep.message)
                        tDate[index].file=rep.result.certificate;
                        tDate[index].status='ISSUED'
                        this.setState({ tDate });
                    }else{
                        message.error(rep.message)
                    }
                })
                .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }
        showImg(src){
            this.setState({
                showEleImg:true,
                imgSrc:src
            })
        }
        closeImg(){
            this.setState({ showEleImg:false})
        }
        componentDidMount() {
            this.getList();
        }
        render() {
            const {tDate,showEleImg,imgSrc}=this.state;
            const  columns = [{
                    title: '课程名称',
                    width: '20%',
                    dataIndex: 'coursepName',

                }, {
                    title: '学员名称',
                    width: '20%',
                    dataIndex: 'studentName',

                },  {
                    title: '操作',
                    width: '40%',
                    dataIndex: 'operate',
                    render:(text, record, index)=> {
                        return (<div>
                            <Button type="primary" htmlType="button" onClick={()=>this.showImg(tDate[index].file)}  disabled={tDate[index].status=='UNISSUED'} >查看证书</Button>&nbsp;&nbsp;
                            <Popconfirm title="确定生成?" onConfirm={()=>this.onCreate(index)}>
                            <Button type="danger" htmlType="button"  disabled={tDate[index].status=='ISSUED'} >生成证书</Button>
                            </Popconfirm></div>)
                    }
                }];


            return (
                <div>
                <div className={showEleImg?"showEleImg active":"showEleImg"}>
                <Icon type="cross-circle-o" onClick={this.closeImg.bind(this)} />
                <img src={imgSrc} alt ="证书图片"/>
                </div>
                <Table columns={columns} dataSource={tDate} bordered pagination={false} loading={this.state.loading} className="animated fadeInUp " />
                </div>
            )
        }
    }
